<!DOCTYPE html>
<html>
    <head>
        <title>event bind</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="./vendor/avalon/avalon.modern.min.js" ></script>
        <style>
           
        </style>
        <script type="text/javascript">

             var model = avalon.define({
                $id: "test",
                firstName: "司徒",
                array: ["aaa", "bbb", "ccc"],
                status: "",
                field: "",
                callback: function(e) {
                    model.status = e.type
                },
                check: function(e) {
                    model.field = this.value + "  " + e.type
                },
                argsClick: function(e, a, b) {
                    alert([].slice.call(arguments).join(" "))
                },
                loopClick: function(a, e) {
                    alert(a + "  " + e.type)
                },
                submit: function() {
                    var data = model.$model
                    if (window.JSON) {
                        setTimeout(function() {
                            alert(JSON.stringify(data))
                        })
                    }
                }
            })
        </script>
    </head>
    <body>
        <!-- 

        ms-click不是简单的onclick的别名，它在内部屏蔽了浏览器的差异，并且对许多浏览器暂时不支持的事件做了兼容处理。

        总的来说，事件绑定是使用ms-on-☆绑定来实现，但avalon也提供了许多快捷方式，让用户能直接以ms-eventName调用那些常用事件，如下:

        animationend、 blur、 change、 input、 click、 dblclick、 focus、 keydown、 keypress、 keyup、 mousedown、 mouseenter、 mouseleave、 mousemove、 mouseout、 mouseover、 mouseup、 scan、 scroll、 submit
        事件绑定的属性值的格式，必须是函数名或函数名后＋小括号（小括号里面添加参数）。

        avalon的事件绑定支持多投事件机制（同一个元素可以绑定N个同种事件，如ms-click=fn, ms-click-1=fn2, ms-click-2=fn3），支持传参（默认第一个参数为事件对象，如果第一个位置被占了，我们可以在其他位置使用$event引用事件对象。）

        -->
        <fieldset ms-controller="test">
            <legend>有关事件回调传参</legend>
            <div ms-mouseenter="callback" ms-mouseleave="callback">{{status}}<br/>
                <input ms-on-input="check"/>{{field}}
            </div>
            <div ms-click="argsClick($event, 100, firstName)">点我</div>
            <div ms-each-el="array" >
                <p ms-click="loopClick(el, $event)">{{el}}</p>
            </div>
            <button ms-click="submit">点我</button>
        </fieldset>
    </body>
</html>
